<template>
  <el-table ref="tableRef" size="small" :data="tableData" v-loading="loading" row-key="id" style="width: 100%" @row-click="handleRowClick">
    <el-table-column prop="alertLevel" label="告警等级" width="90" align="center">
      <template #default="{row}">{{ row.alertLevel ?  `等级${row.alertLevel}` : ''}}</template>
    </el-table-column>
    <el-table-column prop="alertCondition" label="触发条件" width="200" header-align="center" />
    <el-table-column prop="alertValue" label="告警实际值" width="100" align="center" />
    <el-table-column prop="alertThreshold" label="告警等级触发阈值" width="120" align="center" />
    <el-table-column prop="warningFlowList" label="告警流水" header-align="center">
      <template #default="{ row }">
        <div v-if="!row.isChild">
          <el-button link type="primary" class="view-details-btn">点击查看告警流水详情</el-button>
        </div>
        <div v-else class="warning-flow-detail" v-html="row.warningFlowList"></div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, watch } from 'vue'
import { selectCustomerAlertDetailAPI } from '@/api'

const props = defineProps({
  alertId: {
    type: Number,
    default: null
  }
})

const tableData = ref([])
const loading = ref(false)
const tableRef = ref()

// 格式化子节点数据
const formatterChildren = (parent) => {
  const children = []
  
  for (const [key, records] of Object.entries(parent.warningFlowList)) {
    let html = `<div class="flow-group"><div class="flow-header">${key}</div><div class="flow-records">`
    records.forEach(record => {
      html += `<div class="flow-record">${record}</div>`
    })
    
    html += `</div></div>`
    
    children.push({
      id: `${parent.id}-${key}`,
      warningFlowList: html,
      isChild: true
    })
  }
  
  return children
}

// 获取数据
const getList = async () => {
  loading.value = true
  try {
    const { data } = await selectCustomerAlertDetailAPI({ alertId: props.alertId })
    tableData.value = data.map(item => ({
      ...item,
      children: formatterChildren(item)
    }))
  } catch (error) {
    console.error('获取数据失败:', error)
  } finally {
    loading.value = false
  }
}

const handleRowClick = (row) => {
  tableRef.value.toggleRowExpansion(row)
}

watch(() => props.alertId, (newVal) => {
  if (newVal) getList()
  else tableData.value = []
}, {immediate: true})
</script>

<style lang="less" scoped>
.view-details-btn {
  font-weight: 600;
}

.warning-flow-detail {
  padding: 12px;
  background-color: #f8fafc;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* 使用深度选择器作用于v-html内容 */
.warning-flow-detail :deep(.flow-group) {
  margin-bottom: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}

.warning-flow-detail :deep(.flow-header) {
  padding: 8px 12px;
  background-color: #f1f5f9;
  font-weight: 600;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
}

.warning-flow-detail :deep(.flow-records) {
  padding: 8px 0;
}

.warning-flow-detail :deep(.flow-record) {
  padding: 6px 16px;
  line-height: 1.5;
  position: relative;
}

.warning-flow-detail :deep(.flow-record)::before {
  content: "•";
  position: absolute;
  left: 8px;
  top: 6px;
  color: #64748b;
  font-size: 14px;
}

.warning-flow-detail :deep(.flow-record):hover {
  background-color: #f1f5f9;
}
</style>